<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Radio Validation Sample</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<script src="../../widgets/radiovalidation/SpryValidationRadio.js" type="text/javascript"></script>
<link href="../../widgets/radiovalidation/SpryValidationRadio.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.tablecontainer {
	width: 600px;
	clear: both;
}
.tabletitle {
	margin-bottom: 7px;
}
.tablecell {
	width: 33%;
	height: 70px;
	float: left;
}
.submitContainer {
	clear: both;
	margin-left: 5px;
}
#acceptContainer1.radioInvalidState .radioInvalidMsg {
	text-align: left;
	color: blue;
	font-size: 13px;
	border: 1px solid blue;
}
#acceptContainer2.radioRequiredState .valid_option{
	text-align: left;
	color: red;
	font-size: 14px;
	font-weight: bold;
}
#form6 input, #form5 input {
	margin-top: 10px;
    margin: bottom: 10px;
}
table {
	margin-bottom: 5px;
}
td {
	width: 130px;
}
</style>
</head>
<body>
<h3>Spry Radio Validation Samples</h3>
<p>This page gives examples of the Spry Radio Validation widget capabilities.</p>
<hr />
<!--
	First Example - Different validation moments - Change, Blur, Submit
-->
<p>This is an example of a radio validation widget. There are three validation
  techniques: validation can occur as you go (Change), when the text field loses
  focus (Blur) or  when the form is submitted (Submit). The Submit validation
  occurs always, regardless of the other options chosen. </p>
<form id="form1" name="form1" method="get" action="RadioValidationSample.html">
  <div class="tablecontainer">
    <div class="tablecell">
      <div class="tabletitle">Change - Submit</div>
      <span id="ValidRadio1">
      <input type="radio" name="radio1" id="radio1" value="1"/>
      <label for="radio1">Check me!</label>
      <br/>
      <input type="radio" name="radio1" id="radio2" value="2"/>
      <label for="radio2">Or me!</label>
      <br/>
      <span class="radioRequiredMsg">Please make a selection.</span><br />
      <br />
      </span> </div>
    <div class="tablecell">
      <div class="tabletitle">Blur - Submit</div>
      <span id="ValidRadio2">
      <input type="radio" name="radio2" id="radio3" value="1"/>
      <label for="radio3">Check me!</label>
      <br/>
      <input type="radio" name="radio2" id="radio4" value="2"/>
      <label for="radio4">Or me!</label>
      <br/>
      <span class="radioRequiredMsg">Please make a selection.</span><br />
      <br />
      </span> </div>
    <div class="tablecell">
      <div class="tabletitle">Submit</div>
      <span id="ValidRadio3">
      <input name="radio3" type="radio" id="radio5" value="1"/>
      <label for="radio5">Check me!</label>
      <br/>
      <input name="radio3" type="radio" id="radio6" value="2"/>
      <label for="radio6">Or me!</label>
      <br/>
      <span class="radioRequiredMsg">Please make a selection.</span><br />
      <br />
      </span> </div>
    <br style="clear:both;" />
  </div>
  <div class="submitContainer">
    <input type="submit" name="submit" id="submit" value="Submit" />
  </div>
</form>
<script type="text/javascript">
<!--
var ValidRadio1 = new Spry.Widget.ValidationRadio("ValidRadio1", {validateOn:["change"]});
var ValidRadio2 = new Spry.Widget.ValidationRadio("ValidRadio2", {validateOn:["blur"]});
var ValidRadio3 = new Spry.Widget.ValidationRadio("ValidRadio3");
//-->
</script>
<hr />
<!--

	Second example - invalid value, default empty value 

-->
<p>The widget can be applied on a group of radios. You can have in your group of radios 
  an non-empty default value that you don't want to be submitted or define an invalid value.
  This sample forces the user to select a radio different than the default 'None' value and the 'invalid'.</p>
<p>Categories:</p>
<form id="form4" name="form4" method="get" action="RadioValidationSample.html">
  <table id="ValidRadio4">
    <tr>
      <td><input type="radio" name="category" value="none" id="none" checked="checked"/>
        <label for="none">None</label>
      </td>
      <td><input type="radio" name="category" value="invalid" id="invalid" />
        <label for="invalid">INVALID</label>
      </td>
      <td><input type="radio" name="category" value="Sports" id="Sports" />
        <label for="Sports">Sports</label>
      </td>
    </tr>
    <tr>
      <td><input type="radio" name="category" value="Health" id="Health" />
        <label for="Health">Health</label>
      </td>
      <td><input type="radio" name="category" value="Finance" id="Finance" />
        <label for="Finance">Finance</label>
      </td>
      <td><input type="radio" name="category" value="Travel" id="Travel" />
        <label for="Travel">Travel</label>
      </td>
    </tr>
    <tr>
      <td><input type="radio" name="category" value="Music" id="Music" />
        <label for="Music">Music</label>
      </td>
      <td><input type="radio" name="category" value="Technology" id="Technology" />
        <label for="Technology">Technology</label>
      </td>
      <td><input type="radio" name="category" value="Publishing" id="Publishing" />
        <label for="Publishing">Publishing</label>
      </td>
    </tr>
    <tr>
      <td colspan="3" style="width:100%;"><span class="radioRequiredMsg">Please make a selection.</span> <span class="radioInvalidMsg">Please choose a valid value.</span> &nbsp; </td>
    </tr>
  </table>
  <input name="Submit" type="submit" value="Submit" />
</form>
<script type="text/javascript">
<!--
var ValidRadio4 = new Spry.Widget.ValidationRadio("ValidRadio4", {invalidValue:"invalid", emptyValue:"none", validateOn:["change", "blur"]});
//-->
</script>
<hr />
<p>
	The error messages can be located in a different HTML element in page.
</p>
<form id="forms" name="forms" method="get" action="RadioValidationSample.html">
 <div class="tablecontainer">
    <div class="tablecell">
      <div class="tabletitle">Change - Submit</div>
      <span id="ValidRadios">
      <input type="radio" name="radios" id="radios1" value="1"/>
      <label for="radios1">Check me!</label>
      <br/>
      <input type="radio" name="radios" id="radios2" value="2"/>
      <label for="radios2">Not me!</label>
      <br/>
      <span class="radioRequiredMsg">Please make a selection.</span>
 			<span class="radioInvalidMsg">Please choose a valid value.</span><br />
      <br />
			</span>
		</div>
		<div class="tablecell">
      <div class="tabletitle">Errors</div>
      <span id="ValidRadiosErrors">
      <br />
			<span class="radioRequiredMsg">Please make a selection.</span>
 			<span class="radioInvalidMsg">Please choose a valid value.</span><br />
      <br />
			</span>
		</div>
    <br style="clear:both;" />
	</div> 
  <input name="Submit" type="submit" value="Submit" />
</form>
<script type="text/javascript">
<!--
var ValidRadios = new Spry.Widget.ValidationRadio("ValidRadios", {invalidValue:"2", emptyValue:"none", validateOn:["change", "blur"], additionalError: 'ValidRadiosErrors'});
//-->
</script>
<hr />
<!--

	Third Example - Styling the error messages

-->
<p>This is an example showing how to style the error messages, using a css class similar to the one from the SpryValidationRadio.css file.</p>
<form id="form5" name="form5" method="get" action="RadioValidationSample.html">
  <textarea name="EULA1" id="EULA1" cols="45" rows="5" readonly="readonly">Software License Agreement

NOTICE TO USER: PLEASE READ THIS AGREEMENT CAREFULLY. BY COPYING, INSTALLING OR USING ALL OR ANY PORTION OF THE SOFTWARE YOU ACCEPT ALL THE TERMS AND CONDITIONS OF THIS AGREEMENT, INCLUDING, IN PARTICULAR THE LIMITATIONS ON: USE CONTAINED IN SECTION 2; TRANSFERABILITY IN SECTION 4; WARRANTY IN SECTIONS 6 AND 7; LIABILITY IN SECTION 8; AND SPECIFIC PROVISIONS AND EXCEPTIONS IN SECTION 14. YOU AGREE THAT THIS AGREEMENT IS LIKE ANY WRITTEN NEGOTIATED AGREEMENT SIGNED BY YOU. THIS AGREEMENT IS ENFORCEABLE AGAINST YOU AND ANY LEGAL ENTITY THAT OBTAINED THE SOFTWARE AND ON WHOSE BEHALF IT IS USED: FOR EXAMPLE, IF APPLICABLE, YOUR EMPLOYER. IF YOU DO NOT AGREE TO THE TERMS OF THIS AGREEMENT, DO NOT USE THE SOFTWARE. VISIT http://www.mysite.com FOR TERMS OF AND LIMITATIONS ON RETURNING THE SOFTWARE FOR A REFUND
			
Do you accept the terms and conditions stated above?
</textarea>
  <br />
  <span id="acceptContainer1">
  <label for="decline">
  <input type="radio" name="accept" id="decline" value="decline" checked="checked"/>
  I decline</label>
  <label for="accept">
  <input type="radio" name="accept" id="accept" value="accept"/>
  I accept</label>
  <span class="radioInvalidMsg">You cannot submit the form until you accept the terms of the licence agreement!</span> </span><br />
  <input type="submit" name="submit4" id="submit4" value="Submit" />
</form>
<script type="text/javascript">
<!--
var acceptContainer1 = new Spry.Widget.ValidationRadio("acceptContainer1", {invalidValue:"decline", validateOn:["change"]});
//-->
</script>
<hr />
<!--

Fourth Example - Styling the radio label, no error messages

-->
<p>You can change the widget container to use  the radio label, and not to use any error messages. </p>
<form id="form6" name="form6" method="get" action="RadioValidationSample.html">
  <textarea name="EULA2" id="EULA2" cols="45" rows="5" readonly="readonly">Software License Agreement

NOTICE TO USER: PLEASE READ THIS AGREEMENT CAREFULLY. BY COPYING, INSTALLING OR USING ALL OR ANY PORTION OF THE SOFTWARE YOU ACCEPT ALL THE TERMS AND CONDITIONS OF THIS AGREEMENT, INCLUDING, IN PARTICULAR THE LIMITATIONS ON: USE CONTAINED IN SECTION 2; TRANSFERABILITY IN SECTION 4; WARRANTY IN SECTIONS 6 AND 7; LIABILITY IN SECTION 8; AND SPECIFIC PROVISIONS AND EXCEPTIONS IN SECTION 14. YOU AGREE THAT THIS AGREEMENT IS LIKE ANY WRITTEN NEGOTIATED AGREEMENT SIGNED BY YOU. THIS AGREEMENT IS ENFORCEABLE AGAINST YOU AND ANY LEGAL ENTITY THAT OBTAINED THE SOFTWARE AND ON WHOSE BEHALF IT IS USED: FOR EXAMPLE, IF APPLICABLE, YOUR EMPLOYER. IF YOU DO NOT AGREE TO THE TERMS OF THIS AGREEMENT, DO NOT USE THE SOFTWARE. VISIT http://www.mysite.com FOR TERMS OF AND LIMITATIONS ON RETURNING THE SOFTWARE FOR A REFUND
	
Do you accept the terms and conditions stated above?
	</textarea>
  <br />
  <span id="acceptContainer2">
  <label for="accept2_none">
  <input type="radio" name="accept2" id="accept2_none" value="None" checked="checked"/>
  None </label>
  <label for="accept2_accept" class="valid_option">
  <input type="radio" name="accept2" id="accept2_accept" value="accept"/>
  I accept </label>
  <label for="accept2_decline" class="valid_option">
  <input type="radio" name="accept2" id="accept2_decline" value="decline"/>
  I decline </label>
  <br />
  <input type="submit" name="submit5" id="submit5" value="Submit" />
  </span>
</form>
<script type="text/javascript">
<!--
var acceptContainer2 = new Spry.Widget.ValidationRadio("acceptContainer2", {emptyValue: "None", validateOn:["change"]});
//-->
</script>
</body>
</html>
